<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<link rel="stylesheet" type="text/css" href="js/swiper-3.3.1.min.css" />

		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.swiper-container {
				width: 500px;
				height: 300px;
			}

			.swiper-container img {
				width: 100%;
				height: 100%;
			}

			.swiper-button-next {
				background-image: url(img/7.jpg);
			}

			.swiper-container li {
				background: white;
			}
		</style>
	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/1.jpg" alt="" /></div>
				<div class="swiper-slide"><img src="img/2.jpg" /></div>
				<div class="swiper-slide"><img src="img/3.jpg" alt="" /></div>
				<div class="swiper-slide"><img src="img/4.jpg" alt="" /></div>
				<div class="swiper-slide"><img src="img/5.jpg" alt="" /></div>
				<div class="swiper-slide"><img src="img/6.jpg" alt="" /></div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev swiper-button-white"></div>
			<div class="swiper-button-next swiper-button-white"></div>

			<!-- 如果需要滚动条 -->
			<div class="swiper-scrollbar"></div>
		</div>
	</body>
	<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>

	<script>
		var swiper1 = document.querySelector(".swiper-container");
		var scale = 1;
		var mySwiper = new Swiper('.swiper-container', {
			direction: 'horizontal',
			loop: true,
			autoplay: 5000,

			effect: 'cube',
			cube: {
				slideShadows: true,
				shadow: true,
				shadowOffset: 100,
				shadowScale: 0.6
			},

			// 如果需要分页器
			pagination: '.swiper-pagination',
			//			paginationType:'progress',
			paginationClickable: true,
			paginationElement: "li",

			// 如果需要前进后退按钮
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',

			// 如果需要滚动条
			scrollbar: '.swiper-scrollbar'
		})
	</script>

</html>
